<template>
	<view class="content">
		<!-- 有账号 -->
		<view class="has_account" v-if="dataLists.length > 0">
			<uni-list>
				<uni-swipe-action :options="options3" v-for="(value, key) in dataLists" :key="key" @click="deleteClick(value.id)">
					<uni-list-item :show-arrow="false" :thumb="value.avatar" :title="value.bank" :note="value.text" :showArrow="true" @tap="selAccount(value)" />
				</uni-swipe-action>
			</uni-list>
		</view>
		<!-- 添加银行卡 -->
		<view class="add_account row_between">
			<view class="add_account_left">添加银行卡</view>
			<view class="uni-icon uni-icon-plusempty add_account_right" @tap="addAccount" />
		</view>
		<!-- 无账号 -->
		<view class="no_account" v-if="dataLists.length == 0">
			<view class="account_row col">
				<view class="account_image"><image src="../../static/img/myAccount/noaccount.png" mode="aspectFill"></image></view>
				<view class="text">还未添加任何账户哦~</view>
			</view>
		</view>
		<uni-popup :show="showConfirm" :type="type" :custom="true" :animation="false" :mask-click="false">
			<view class="uni-tip-confirm">
				<view class="uni-tip-confirm-title">您确认删除该账户吗？</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button" style="border-right: 2upx solid #E3E3E3" @click="cancel('N')">取消</view>
					<view class="uni-tip-button" @click="cancel('Y')">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="show" :type="type" :custom="true" :animation="false" :mask-click="true" @change="change">
			<view class="uni-tip">
				<view class="uni-tip-image"><image src="../../static/img/myAccount/delsuccess.png" mode=""></image></view>
				<view class="uni-tip-content">删除账户成功！</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { withdrawAccountList, delWithdrawAccount } from '@/utils/api';
export default {
	components: {
		uniSwipeAction,
		uniList,
		uniListItem,
		uniPopup
	},
	data() {
		return {
			show: false,
			showConfirm: false,
			type: 'center',
			tempId: '',
			dataLists: [],
			options3: [
				{
					text: '删除',
					style: {
						backgroundColor: '#F4F4F4',
						color: '#CD1C1C'
					}
				}
			],
			page: '1',
			limit: '50',
			pageFlag: ''
		};
	},
	onNavigationBarButtonTap(e) {
		this.addAccount();
	},
	methods: {
		selAccount(value) {
			if (this.pageFlag == '1') {
				uni.setStorageSync('bankinfo', value);
				// uni.setStorageSync('bankAccount', value.text);
				// uni.setStorageSync('bankId', value.id);
				uni.navigateBack({
					delta: 1
				});
			}
		},
		addAccount() {
			uni.navigateTo({
				url: '../addAccount/addAccount'
			});
		},
		deleteClick(id) {
			console.log(id);
			this.showConfirm = true;
			this.tempId = id;
		},
		async cancel(type) {
			if (type === 'Y') {
				let id = this.tempId;
				let res = await delWithdrawAccount(id);
				console.log(res);
				if (res.status == 0) {
					let len = this.dataLists.length;
					for (let i = 0; i < len; i++) {
						if (id == this.dataLists[i].id) {
							this.dataLists.splice(i, 1);
							
							// let storageID = uni.getStorageSync('bankId');
							// if (id == storageID) {
							// 	uni.removeStorageSync('bankAccount');
							// 	uni.removeStorageSync('bankId');
							// }
							let bankinfo = uni.getStorageSync('bankinfo');
							if (id == bankinfo.id) {
								uni.removeStorageSync('bankinfo');
							}
							break;
						}
					}
					let that = this;
					that.showConfirm = false;
					that.show = true;
					let countdown = setInterval(() => {
						if (!that.show) {
							clearInterval(countdown);
						}
						that.show = false;
					}, 1000);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 1000,
						position: 'bottom'
					});
				}
			}
			this.showConfirm = false;
			this.tempId = '';
		},
		change(e) {
			this.show = e.show;
		},

		async withdrawAccountList() {
			let params = {};
			params['page'] = this.page;
			params['limit'] = this.limit;
			let res = await withdrawAccountList(params);
			console.log(res);
			if (res.status == 0) {
				if (res.data.docs.length > 0) {
					this.dataLists = res.data.docs.map(item => {
						let bankflag = '';
						if (item.bank.indexOf('工商')!=-1) {
							bankflag = 'ICBC';
						} else if (item.bank.indexOf('建设')!=-1) {
							bankflag = 'CCB';
						} else if (item.bank.indexOf('农业')!=-1) {
							bankflag = 'ABC';
						} else if (item.bank.indexOf('中国银行')!=-1) {
							bankflag = 'BOC';
						} else if (item.bank.indexOf('招商')!=-1) {
							bankflag = 'CMB';
						} else if (item.bank.indexOf('交通')!=-1) {
							bankflag = 'COMM';
						} else if (item.bank.indexOf('广发')!=-1) {
							bankflag = 'GDB';
						} else {
							bankflag = 'OTHER';
						}
						return {
							type: item.type,
							name: item.name,
							text: item.text,
							bank: item.bank,
							open: item.open,
							id: item.id,
							avatar: '/static/img/myAccount/' + bankflag + '.png'
						};
					});
					console.log(this.dataLists);
					this.$forceUpdate();
				} else {
					// uni.removeStorageSync('bankAccount');
					// uni.removeStorageSync('bankId');
					uni.removeStorageSync('bankinfo');
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message,
					duration: 1000,
					position: 'bottom'
				});
			}
		}
	},
	onLoad(opt) {
		this.pageFlag = opt.pageFlag;
	},
	onShow() {
		this.withdrawAccountList();
	}
};
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100%;
	border-top: 2upx solid #e3e3e3;
}
.add_account {
	height: 113upx;
	padding: 0upx 32upx;
	border-bottom: 2upx solid #e3e3e3;
	.add_account_left {
		font-size: 30upx;
	}

	.add_account_right {
		font-size: 70upx;
	}
}
.no_account {
	width: 100%;
	height: 100%;

	.account_row {
		.account_image {
			margin-top: 169upx;

			image {
				width: 459upx;
				height: 290upx;
			}
		}

		.text {
			height: 32upx;
			font-size: 34upx;
			font-weight: 400;
			color: #bbd5ef;
			margin-top: 62upx;
		}
	}
}

/* 提示窗口 */
.uni-tip {
	padding: 50upx;
	width: 416upx;
	height: 219upx;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10upx;
}

.uni-tip-image {
	image {
		width: 50upx;
		height: 50upx;
	}
}

.uni-tip-content {
	margin-top: 10upx;
	font-size: 30upx;
	color: #666;
}

/* 提示窗口 */
.uni-tip-confirm {
	// padding: 15px;
	width: 416upx;
	height: 220upx;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10px;
}

.uni-tip-confirm-title {
	text-align: center;
	font-size: 30upx;
	line-height: 4;
	height: 50%;
	color: #333;
}

.uni-tip-group-button {
	height: 49.5%;
	display: flex;
	border-top: 2upx solid #e3e3e3;
}

.uni-tip-button {
	width: 100%;
	line-height: 4;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}
</style>
